<template>
    <div class="knowledgeConotainer">
        <div class="content">
            <p class="title">地中海膳食模式</p>
            <p class="intro">以蔬菜水果、鱼类、五谷杂粮、豆类和橄榄油为主。</p>
            <p class="title">健康卡片</p>
            <div class="card first">
                <div class="cardContent">
                    <div class="showImg eat"></div>
                    <p class="cardTitle">早午晚餐搭配原则</p>
                    <p class="cardIntro">早：碳水+蛋白质+纤维素</p>
                    <p class="cardIntro">午：碳水+蛋白质+纤维素+健康脂肪</p>
                    <p class="cardIntro">晚：碳水+蛋白质+纤维素</p>
                </div>
            </div>
            <div class="card">
                <div class="cardContent">
                    <div class="showImg normal"></div>
                    <p class="cardTitle">常见食物</p>
                    <p class="cardIntro">碳水：燕麦粥 全麦面包 糙米 杂粮 红薯 荞麦面</p>
                    <p class="cardIntro">蛋白质：鸡蛋 牛奶 豆腐 鱼类 鸡胸肉 豆类 瘦肉</p>
                    <p class="cardIntro">纤维素：油菜 芥蓝 生菜 菠菜 香菇 金针菇 平菇 西兰花 秋葵 冬瓜 豆芽 猕猴桃 橙子 草莓 柚子</p>
                    <p class="cardIntro">健康脂肪：核桃 杏仁 腰果 橄榄油 鳄梨</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'foodKnowledge',
    }
</script>

<style scoped>
    .knowledgeContainer{
        width: 100%;
    }
    .content{
        margin-top: .4rem;
        margin-left: .32rem;
    }
    .title{
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .intro{
        font-family: 'PingFangSC-Regular';
        color: #333333;
        font-size: .28rem;
        margin-bottom: .4rem;
        margin-top: .24rem;
    }
    .card{
        margin-left: .32rem;
        background-color: #FFF;
        width: 6.22rem;
        border-radius: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cardContent{
        width: 90%;
        margin-top: .16rem;
        margin-bottom: .16rem;
        position: relative;
    }
    .showImg{
        position: absolute;
        right: 0;
        top:0;
        width: 0.6rem;
        height: 0.6rem;
        background-position: center;
        background-size: contain;
        border-radius: .2rem;
    }
    .eat{
        background-image: url(../assets/img/@2x/2-2eat.png);
    }
    .normal{
        background-image: url(../assets/img/@2x/1-32normal.png);
    }
    .cardTitle{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        font-size: .3rem;
    }
    .cardIntro{
        font-family: 'PingFangSC-Regular';
        color: #333333;
        font-size: .28rem;
        margin-top: .25rem;
    }
    .first{
        margin-top: .1rem;
        margin-bottom: .2rem;
    }
</style>